<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局属性示例</title>
    <!-- 演示id和class的选择器用法 -->
    <style>
        .title {
            font-size: 60px;
        }

        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 
        id      身份证      交给CSS、Javascript操作它的桥梁，选择器
        class   类别        交给CSS、Javascript操作它的桥梁，选择器
        title   标题        提示文字
        style   样式        局部样式

        tabindex    设置元素tab次序

        contenteditable 全局属性（所有标签都可以用的属性） 
        把任意标签改成可编辑状态，页面暂存状态。
            如果需要保存，前端技术保存，存在本地。              javascrit
                        后端技术保存，存在服务器（数据库）      javaweb  mysql
        
     -->
    <!-- id class title contenteditable -->
    <h1 id="pageTitle" class="title center" contenteditable="true" title="一号标题提示文字">一号标题</h1>
    <!-- style -->
    <p title="段落文字提示文字" style="font-size: 60px;color: blueviolet;">段落文字</p>

    <!-- tabindex 设置元素的tab次序 -->
    <input tabindex="1" type="text">
    <input tabindex="3" type="text">
    <input tabindex="2" type="text">
    <input tabindex="4" type="text">

    <!-- 快捷键 alt+指定的快捷键 -->
    <a href="//www.baidu.com/s?wd=HTML" accesskey="h">HTML</a>
    <a href="//www.baidu.com/s?wd=CSS" accesskey="c">CSS</a>

    <script>
        // 演示class在JS选择器中的用法
        let oH1 = document.querySelector(".title");
        oH1.style.background = 'red';
    </script>
</body>
</html>